init()
function init(){
    var num
let user = [{ number: 1, name: '董事长', describe: '管理者', time: '2022-03-23  18:38：23', change: '<button class="change" data-id=${(user[i].id)}>编辑</button>', operation: '<button class="shanchu" >删除</button>' },
{ number: 2, name: '总经理', describe: '管理者', time: '2022-03-24  18:38：23', change: '<button class="change">编辑</button data-id=${(user[i].id)}>', operation: '<button class="shanchu" >删除</button>' },
{ number: 3, name: '副总经理', describe: '运营者', time: '2022-03-25  18:38：23', change: '<button class="change">编辑</button data-id=${(user[i].id)}>', operation: '<button class="shanchu">删除</button>' },
{ number: 4, name: '经理', describe: '工作者', time: '2022-03-26  18:38：23', change: '<button class="change">编辑</button data-id=${(user[i].id)}>', operation: '<button   class="shanchu">删除</button>' },
{ number: 5, name: '职员', describe: '工作者', time: '2022-03-27  18:38：23', change: '<button class="change">编辑</button data-id=${(user[i].id)}>', operation: '<button class="shanchu">删除</button>' },
{ number: 6, name: '秘书', describe: '秘书', time: '2022-03-28  18:38：23', change: '<button class="change">编辑</button data-id=${(user[i].id)}>', operation: '<button class="shanchu">删除</button>' },
{ number: 7, name: '保洁', describe: '工作者', time: '2022-03-28  18:38：23', change: '<button class="change">编辑</button data-id=${(user[i].id)}>', operation: '<button class="shanchu">删除</button>' },


]
    ;
// window.onload = function () {
//     displaydata();//显示数据
//     // addBtn4Event1();//添加btn4的事件
// }
function displaydata() {
    $('#tball').html('')
    let fragment1 = document.createDocumentFragment();
    for (let i = 0; i < user.length; i++) {
        let tr = document.createElement('tr');
        tr.innerHTML = `
        <td>${user[i].number}</td>
            <td>${user[i].name}</td>
                <td>${user[i].describe}</td>
                    <td>${user[i].time}</td>
                    <td>${user[i].change}</td>
                    <td>${user[i].operation}</td>
                         `;

        fragment1.appendChild(tr);
    }
    $('#tball').append(fragment1)
}
displaydata()




// 查询

let tball = document.getElementById('tball');
let btn1 = document.getElementById('btn1');
btn1.onclick = function () {
    let one = document.getElementById('search').value;
    for (let i = 0; i < user.length; i++) {
        if (user[i].name == one) {
            tball.rows[i].style.display = 'table-row'
        } else {
            tball.rows[i].style.display = 'none'
        }
    }
}
//重置


let btn2 = document.getElementById('btn2');
btn2.onclick = function () {
    document.getElementById('search').value = ''
    displaydata()
    paging()
}



//新增
let btn3 = document.getElementById('btn3');
let xinzengtanchu = document.getElementById('xinzengtanchu')
//  let add=document.getElementById('add')
btn3.onclick = function () {
    xinzengtanchu.style.display = 'block'

}




addbtn.onclick = function add() {
    let number = document.getElementById('number').value
    let name = document.getElementById('name').value
    let describe = document.getElementById('describe').value
    let time = document.getElementById('time').value
    let addbtn = document.getElementById('addbtn').value;
    let shanchu = '<button id="change">删除</button>';
    let bianji = '<button id="shanchu">编辑</button>';
    // console.log(operation)
    // xinzengtanchu.style.display='none'
    // let user1={number:number,name:name ,describe : describe,time: time}  
    // let tianjiachenggong=document.getElementById('tianjiachenggong')
    // tianjiachenggong.style.display='block'
    layer.alert('添加成功！')
    user.push({ number: number, name: name, describe: describe, time: time, operation: shanchu, change: bianji })
    xinzengtanchu.style.display = 'none'
    displaydata()
    paging()


    // let cancel = document.getElementById('cancel')
    // cancel.onclick = function () {
    //   console.log(123)
    //     xinzengtanchu.style.display = 'none'

    // }

}
//删除


// 添加删除事件


// $('#shanchu').on('click',function(){
//     console.log(123)
// })
// let shanchu=document.getElementById('shanchu')
// let td=shanchu.parentNode.parentNode



// $('tbody tr td:nth-child(6) button').click
// let shanchu=document.getElementById('shanchu')
// shanchu.onclick=function(){
//     console.log(123)
//     $(this).parent().parent().remove();

// }
//     shanchu.onclick=function(){
//         (
//             function () {
//                 $(this).parent().parent().remove();
//                 console.log(123)
//             }
//         )
// }

//编辑
//   let change=document.getElementById('change');
//   let bianjitanchu=document.getElementById('bianjitanchu');
//   let td=change.parentNode.parentNode
//   change.onclick=function(){
//     bianjitanchu.style.display='block'




//   }
//修改
//获取修改标签对象
// let change = document.querySelector('.change')
//  let bianjitanchu = document.getElementById('bianjitanchu');
//  //获取两个按钮
//  let cancel = document.querySelector('#cancel');
//  let confirm = document.querySelector("#confirm");

//  //打开修改界面
//  $("tball").on("click", "#bianji", function () { //点击查看按钮触发的动作
//     console.log(123)
//  $("#bianjitanchu").show();
// });

//  confirm.onclick = function () {
//  console.log(123);
//  let xuhao = document.getElementById("xuhao").value;
//  let mingcheng = document.getElementById("mingcheng").value;
//  let miaoshu = document.getElementById("miaoshu").value;
//  let shijian = document.getElementById("shijian").value;

//  user.splice({
//  number: xuhao, name: mingcheng,
//  describe: miaoshu, time: shijian
//  });
//  displayData();
//  }
//  confirm.onclick = function () {
// bianjitanchu.style.display = 'none';
//  }

//  cancel.onclick = function () {
//   bianjitanchu.style.display = 'none';
//  }
//修改
//获取修改标签对象
//  let btn1 = document.getElementsByClassName('btn1');

//获取两个按钮
// let cancel = document.querySelector('#cancel');
//  let confirm = document.querySelector("#confirm");

//打开修改界面
$("tball").on("click", "#change", function () { //点击查看按钮触发的动作
    $("#bianjitanchu").show();
});

confirm.onclick = function () {
    console.log(123);
    let xuhao = document.getElementById("xuhao").value;
    let mingcheng = document.getElementById("mingcheng").value;
    let miaoshu = document.getElementById("miaoshu").value;
    let shijian = document.getElementById("shijian").value;
    user.splice({
        number: xuhao, name: mingcheng,
        describe: miaoshu, time: shijian
    });
    displayData();
}
confirm.onclick = function () {
    bianjitanchu.style.display = 'none';
}

cancel.onclick = function () {
    bianjitanchu.style.display = 'none';
}




//分页
paging();

function paging() {

    let page = 1;//第几页
    let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
    let serialNumber = user.length;//序号
    onlouad(0, 3)//初始页面信息，第一页
    $("#inputPage").val(page);//页码


    // 下一页
    $("#nextpage").click(function () {
        if (no + 3 < serialNumber) {//如果no+5小于数据条数
            no += 3;
            page++;
            $("#inputPage").val(page);
            if (serialNumber >= (no + 3)) {
                onlouad(no, no + 3);
            } else (
                onlouad(no, serialNumber)

            )
        }

    });

    // 上一页
    $("#lastpage").click(function () {
        if (no - 3 >= 0) {
            no -= 3;
            page--;
            $("#inputPage").val(page);
            onlouad(no, no + 3);
        }
    });
}


function onlouad(n, a) { //分页调用函数
    //  $("#tball").html("")
    for (let i = 0; i < user.length; i++) {
        $('.shanchu').parent().parent().remove()

    }


    //文档碎片
    let fragment1 = document.createDocumentFragment();
    for (let i = n; i < a; i++) {
        let tr = document.createElement("tr");
        tr.innerHTML = `
<td>${user[i].number}</td>
<td>${user[i].name}</td>
<td>${user[i].describe}</td>
<td>${user[i].time}</td>
<td>${user[i].change}</td>
<td>${user[i].operation}</td>
`;

        fragment1.appendChild(tr);
    }

    $("#tball").append(fragment1);

    //编辑
    // let change=document.getElementById('change')
    // let bianjitanchu=document.getElementById('bianjitanchu')
    //  change.onclick=function(){
    //     bianjitanchu.style.display='block'
    // }




    // $('.confirm').click(


    //     function (){
    //         let xuhao=document.getElementById('xuhao').value
    //         let mingchen=document.getElementById('mingchen').value
    //         let miaoshu=document.getElementById('miaoshu').value
    //         let shijian=document.getElementById('shijian').value


    //     }
    // )
    // $('#confirm').click(
    //     function(e){
    //        let delId=$(e.target).attr('data-id')
    //        let xuhao=document.getElementById('xuhao').value
    //         let mingchen=document.getElementById('mingchen').value
    //         let miaoshu=document.getElementById('miaoshu').value
    //         let shijian=document.getElementById('shijian').value
    //         for(let i=0;i<user.length;i++){
    //             if(delId==user[i].id){
    //                 user[i].name=mingchen;
    //                 user[i].describe=miaoshu;
    //                 user[i].time=shijian;
    //                 $('#bianjitanchu').css('display','none')
    //             }
    //         }
    //     }
    // )



    //删除
    $('.shanchu').click(
        function () {
            $(this).parent().parent().remove();
        }
    )



}



// 编辑按钮
redact()
function redact() {
    let show;
    $('tbody tr .change').click(function (e) {
        // id: 1, PrincipalName: '原生广场', displayStatus: '显示', remark: '无备注', RegionName: 'A区' 
        let id =  $('tbody tr button').parent().prev().prev().prev().prev().prev()[0].innerText;
        //获取当前按钮id
        for (let i = 0; i < user.length; i++) {
          
            if (user[i].number == id) {
                num = i;
                break;
            }
        }
        $('#bianjitanchu').css('display', 'block');
        document.getElementById('xuhao').value = user[num].number;
        document.getElementById('mingchen').value = user[num].name;
        document.getElementById('miaoshu').value = user[num].describe;
        document.getElementById('shijian').value = user[num].time;
      
        btnS2 = document.getElementById('confirm');
        btnS2.onclick = function () {
           
            btnSubmit2(num);
        }
        //获取数据当前id
        // let PrincipalName = document.getElementById('PrincipalName').value;
        // let remark = document.getElementById('remark').value;
        // let introduce = document.getElementById('introduce').value;
        // let show = document.getElementById('show').checked;
        // let unshow = document.getElementById('unshow').checked;
     
        // $('#BtnSubmit2').click(btnSubmit2);
        // $('show').checked = show;

    })

}

        //编辑提交

        function btnSubmit2(num) {
    let number = document.getElementById('xuhao').value;
    let name = document.getElementById('mingchen').value;
    let describe = document.getElementById('miaoshu').value;
    let time = document.getElementById('shijian').value;
    let operation=user[num].operation
    let change=user[num].change





    //Alert
    $('#bianjitanchu').css('display', 'none');
    user.splice(num, 1, { number: (num + 1), name,describe, time ,operation,change});
    layer.alert('提交成功！')
    
    displaydata()//重置

}
}